<template>
  <div id="shop_choice">
    <!-- 搜索栏 -->
    <Search @change="getResults" @select="move2Map" />
    <!-- 业态/楼层/字母分类 -->
    <div class="toggleNav">
      <div
        :class="['nav',{'isActive': item.isActive}]"
        v-for="(item,index) in nav"
        :key="index"
        @click="toggleNav(item)"
      >{{item.name}}</div>
    </div>
    <!-- 店铺详情显示 -->
    <ShopShow
      v-if="toggleInfo && toggleInfo.length > 0"
      :type="type"
      :formatType="formatType"
      :toggleInfo="toggleInfo"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import Search from "./search";
import ShopShow from "./shopShow";
export default {
  props: {
    formatType: String
  },
  data() {
    return {
      // 一级菜单
      nav: [
        {
          name: "业态",
          isActive: true
        },
        {
          name: "楼层",
          isActive: false
        },
        {
          name: "字母",
          isActive: false
        }
      ],
      // 选中的一级菜单类型
      type: "业态",
      // 真正渲染的二级菜单
      toggleInfo: null,
      // 业态分类
      formatsNav: [
        {
          name: "全部",
          icon: "",
          isActive: true
        }
      ],
      // 楼层分类
      floorsNav: [
        {
          name: "全部",
          isActive: true
        }
      ],
      // 字母分类
      wordsNav: [
        {
          name: "全部",
          isActive: true
        },
        {
          name: "ABCDE",
          isActive: false
        },
        {
          name: "FGHIJ",
          isActive: false
        },
        {
          name: "KLMNO",
          isActive: false
        },
        {
          name: "PQRST",
          isActive: false
        },
        {
          name: "UVWXYZ",
          isActive: false
        }
      ]
    };
  },
  computed: {
    // vuex 取值
    ...mapState("home", {
      shopInfo: state => state.shopInfo,
      formatInfo: state => state.formatInfo,
      mapConfig: state => state.mapConfig
    })
  },
  created() {},
  mounted() {
    // 初始化渲染二级菜单为业态二级菜单
    this.toggleInfo = this.formatsNav;
    // 以下是异步数据，如果组件初始化时存在则直接通过其筛选数据
    this.shopInfo.length > 0 && this.filterFloorInfo();
    this.formatInfo.length > 0 && this.filterFormatInfo();
  },
  watch: {
    // 以下异步数据组件初始化时还未加载，需要监听他们数据拉取到时候做筛选数据逻辑处理
    shopInfo(newVal) {
      if (newVal.length > 0) {
        this.filterFloorInfo();
      }
    },
    formatInfo(newFormats) {
      if (newFormats.length > 0) {
        this.filterFormatInfo();
      }
    }
  },
  methods: {
    // 筛选业态信息
    filterFormatInfo() {
      this.formatInfo.forEach(format => {
        if (
          format.classify === this.formatType &&
          format.name !== this.formatType
        ) {
          this.formatsNav.push({
            name: format.name,
            icon: format.logo
              ? `https://openapi.cloudindoormap.com:8085/${format.logo}`
              : "",
            isActive: false
          });
        }
      });
    },
    // 筛选楼层信息
    filterFloorInfo() {
      this.shopInfo.forEach(shop => {
        // 楼层分组 去重
        if (
          !this.floorsNav.find(item => {
            return item.name === shop.floor_name;
          })
        ) {
          this.floorsNav.push({
            name: shop.floor_name,
            order: shop.orderBy,
            isActive: false
          });
        }
      });

      // 排序
      if (this.mapConfig.floorOrder) {
        this.floorsNav = this.floorsNav.sort((a, b) => {
          return (
            this.mapConfig.floorOrder[a.name] -
            this.mapConfig.floorOrder[b.name]
          );
        });
      }
    },
    // 获取搜索结果
    getResults(res) {
      console.log("res :>>", res);
    },
    // 点击搜索结果
    move2Map(nodeId) {},
    // 改变nav栏 并修改样式
    toggleNav(item) {
      if (!item.isActive) {
        this.nav.forEach(nav => {
          nav.isActive = false;
          if (nav.name === item.name) {
            nav.isActive = true;
          }
        });

        switch (item.name) {
          case "业态":
            {
              this.toggleInfo = this.formatsNav;
              this.type = "业态";
            }
            break;
          case "楼层":
            {
              this.toggleInfo = this.floorsNav;
              this.type = "楼层";
            }
            break;
          case "字母":
            {
              this.toggleInfo = this.wordsNav;
              this.type = "字母";
            }
            break;
        }
      }
    }
  },
  components: { Search, ShopShow }
};
</script>

<style scoped lang='less'>
#shop_choice {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2840px;
  height: 100%;
  .search {
    top: 85px;
  }
  .toggleNav {
    width: 1050px;
    position: absolute;
    left: 50%;
    top: 235px;
    border-bottom: 3px solid #ad8c52;
    transform: translateX(-50%);
    display: flex;
    .nav {
      flex: 1;
      height: 60px;
      margin: 0 70px;
      background-color: #e7d1b5;
      box-shadow: 0px 3px 6px 0px #d7c6a6;
      border-radius: 36px 36px 0px 0px;
      font-size: 40px;
      line-height: 60px;
      letter-spacing: 8px;
      color: #8d6518;
      text-align: center;
      transition: all 0.4s;
      &.isActive {
        background-image: linear-gradient(120deg, #ffd59b 0%, #a87e43 100%);
        color: #ffffff;
      }
    }
  }
}
</style>